<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8"></meta>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
    <title></title>


</head>
<body class="hold-transition skin-blue sidebar-mini">
<div th:fragment="chargeData">
    <style>
        .smokeCharts {
            width: 100%;
            height: 100%;
            right: -100%;
            height: 100% !important;
            /* padding-top: 0; */
            position: absolute;
            z-index: 10000;
            background-color: #111522;
        }

        .padding0 {
            padding: 0;
        }

        .dataStatistics {
            display: none;
            width: 100%;
            height: 100%;
            background: url(/public/images/dataStatistics.png) no-repeat;
            /* background-size: 100% 100%; */
        }

        .dataStatistics img {
            width: 100%;
            height: 100%;
        }

        .statisticsList {
            width: 33.3333%;
            height: 50%;
            float: left;
        }

        .statisticsClose {
            position: absolute;
            top: 30px;
            right: 30px;
        }

        .statisticsClose {
            width: 40px;
            height: 40px;
            background: url(/public/images/dataStatisticsBack.png) no-repeat;
            cursor: pointer;
        }

        .control-sidebar {
            right: -100%;
        }

        .dataSumAlarm {
            top: 281px;
            left: 914px;
            position: absolute;
            font-size: 24px;
            color: #defe5b;
        }

        .dataHandleNum {
            top: 281px;
            left: 1177px;
            position: absolute;
            font-size: 24px;
            color: #defe5b;
        }

        .dataSmokeSum {
            top: 281px;
            left: 635px;
            position: absolute;
            font-size: 24px;
            color: #defe5b;
        }

        .earlyWarningColor .table {
            width: 300px;
            height: 180px;
            overflow-y: auto;
            margin-top: 10px;
        }

        .earlyWarningColor {
            width: 280px;
            overflow: hidden;
        }

        .earlyWarningColorHid {
            width: 300px;
            height: 220px;
            overflow: hidden;
        }

        .dataStatistics .item {
            width: 127px;
            height: 44px;
            line-height: 44px;
            text-align: center;
            cursor: pointer;
        }

        .dataStatistics .table p {
            height: 20px;
            letter-spacing: 2px;
        }

        .dataStatistics .list {
            height: 190px;
            width: 320px;
            position: absolute;
            top: 0;
            left: 166px;
        }

        .dataStatistics .listBox {
            position: absolute;
            top: 582px;
            left: 1400px;
            width: 490px;
            height: 220px;
            background: url(/public/images/middleDanger.png) no-repeat;
        }

        .dataCharts {
            width: 390px;
            height: 370px;
        }

        .dataStatistics .timeRun {
            position: absolute;
            top: 30px;
            right: 100px;
            color: #74f4ff;
            font-size: 22px;
        }

        #dataGuanZhu {
            position: relative;
        }

        .dataGuanZhu-list {
            position: absolute;
            top: 181px;
            left: 1451px;
            width: 450px;
            /* display: flex; */
            display: none;
            height: 265px;
            flex-direction: column;
        }

        .dataGuanZhu-list p {
            margin: 0 0 10px;
            flex: 1;
            align-items: center;
            justify-content: center;
            line-height: 100%;
            /*  text-align: center; */
            flex-direction: column;
            height: 28px;
        }

        /* .dataStatistics .list2{
            background:url(/public/images/highDanger.png) no-repeat;
        } */
        /* 		.control-sidebar-bg, .control-sidebar {
                    right: -100%;
                } */
    </style>
    <div class="historyNewsStyle" id="chargeData">

        <aside class="control-sidebar control-sidebar-dark historyHeight openPublicSidebar smokeCharts "><!--  control-sidebar-open -->
            <!-- 真实大数据 -->
            <div th:replace="main/data::data">

            </div>
		</aside>
    </div>
    <script>

    //点击关闭按钮
    $(".statisticsClose").on("click", function () {
        console.log(22)
        //移除右部侧边栏
        $(".openPublicSidebar").removeClass("control-sidebar-open");
        return false;
    });
    </script>
</div>

</body>
</html>